import React, { useState } from 'react';
import styles from './styles.module.less';
import { Radio, Tabs } from 'antd';
import { useTranslation } from 'react-i18next';
import WorldMapDemo from "../../components/HighCharts/BasicWorldMap";
import BaseInfo from "./baseinfo";
import DataInfo from "./dataInfo";
import DataCenter from "./dataCenter";
import MyMarket from "./myMarket";
import AllMarket from "./allMarket";
import {
    BarsOutlined,
    CloudServerOutlined,
    DatabaseOutlined,
    FileProtectOutlined,
    LineChartOutlined, LogoutOutlined, MenuOutlined
} from "@ant-design/icons";
import Cookies from "js-cookie";

import dobleModalConfig from '@src/utils/dobleModalConfig';

const Profile = () => {
    const { t } = useTranslation();

    const [tabActiveKey, setTabActiveKey] = useState('0');

    const onTabClick = async (key) => {
        if (key === "5") {
            const configFlag = await dobleModalConfig(t('Are you sure you want to exit?'))
            if (!configFlag) return;
            setTabActiveKey(key);

            // 执行退出逻辑
            console.log('用户点击了退出登录选项卡');
            // 这里可以调用执行退出逻辑的函数
            Cookies.remove('token');
            window.location.href = '/home';
        }
        setTabActiveKey(key);
    };

    return (
        <div className={styles.user_center}>
            <Tabs
                activeKey={tabActiveKey}
                cardHeight="800"
                defaultActiveKey="0"
                tabPosition="left"
                style={{ color:'#847ea8' }}
                onTabClick={onTabClick}
                items={new Array(6).fill(null).map((_, i) => {
                    const id = String(i);
                    if (id==="0"){
                        return {
                            label: (<span> <FileProtectOutlined /> {t('Company Information')}</span>),
                            key: id,
                            children: (
                                <div className={styles.right_content_box}>
                                    <BaseInfo/>
                                </div>
                            ),
                        };
                    } else if (id==="1"){
                        return {
                            label: (<span> <DatabaseOutlined /> {t('Resource Center')}</span>),
                            key: id,
                            children: (
                                <div className={styles.right_content_box}>
                                    <DataCenter/>
                                </div>
                            ),
                        };
                    } else if (id==="2"){
                        return {
                            label: (<span> <LineChartOutlined /> {t('Statistics Center')}</span>),
                            key: id,
                            children: (
                                <div className={styles.right_content_box}>
                                    <DataInfo/>
                                </div>
                            ),
                        };
                    } else if (id==="3"){
                        return {
                            label: (<span> <BarsOutlined /> {t('My items')}</span>),
                            key: id,
                            children: (
                                <div className={styles.right_content_box}>
                                    <MyMarket/>
                                </div>
                            ),
                        };
                    } else if (id==="4"){
                        return {
                            label: (<span> <MenuOutlined /> {t('My Bid')}</span>),
                            key: id,
                            children: (
                                <div className={styles.right_content_box}>
                                    <AllMarket/>
                                </div>
                            ),
                        };
                    }
                    else if (id==="5"){
                        return {
                            label: (<span> <LogoutOutlined /> {t('Log out')}</span>),
                            key: id,
                        };
                    }
                })}
            />

        </div>
    );
};

export default Profile;
